<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="'Add CSR' | translate"
  [loading]="isLoading()"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <mat-vertical-stepper [linear]="true" (selectionChange)="updateSummary()">
      <ix-use-ix-icons-in-stepper></ix-use-ix-icons-in-stepper>

      <mat-step [stepControl]="identifierAndType().form">
        <ng-template matStepLabel>{{ 'Identifier and Type' | translate }}</ng-template>
        <ix-csr-identifier-and-type
          (profileSelected)="onProfileSelected($event)"
        ></ix-csr-identifier-and-type>
      </mat-step>

      @if (isImport) {
        <mat-step [stepControl]="import()?.form">
          <ng-template matStepLabel>{{ 'Import Certificate' | translate }}</ng-template>
          <ix-csr-import></ix-csr-import>
        </mat-step>
      } @else {
        <mat-step [stepControl]="options()?.form">
          <ng-template matStepLabel>{{ 'Certificate Options' | translate }}</ng-template>
          <ix-csr-options></ix-csr-options>
        </mat-step>
        <mat-step [stepControl]="subject()?.form">
          <ng-template matStepLabel>{{ 'Certificate Subject' | translate }}</ng-template>
          <ix-csr-subject></ix-csr-subject>
        </mat-step>
        <mat-step [stepControl]="constraints()?.form">
          <ng-template matStepLabel>{{ 'Extra Constraints' | translate }}</ng-template>
          <ix-csr-constraints></ix-csr-constraints>
        </mat-step>
      }

      <mat-step>
        <ng-template matStepLabel>{{ 'Confirm Options' | translate }}</ng-template>

        <ix-summary [summary]="summary"></ix-summary>

        <p class="confirm-line">{{ 'Confirm these settings.' | translate }}</p>

        <ix-form-actions>
          <button
            mat-button
            matStepperPrevious
            ixTest="back"
          >{{ 'Back' | translate }}</button>
          <button
            *ixRequiresRoles="requiredRoles"
            mat-button
            matStepperNext
            color="primary"
            ixTest="save"
            (click)="onSubmit()"
          >{{ 'Save' | translate }}</button>
        </ix-form-actions>
      </mat-step>
    </mat-vertical-stepper>
  </mat-card-content>
</mat-card>
